﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script type="text/javascript" src="jquery-1.5.1.min.js"></script>
</head>
<body>
<select id='photolist' name='photolist'></select>
<img id='photo' alt='photodisplay' src='' />
<br />
<button id='like'>Like</button>
<script type="text/javascript">
    $(document).ready(function () {
        var query = 'PhotoData.svc/PhotoInfos'; //Return XML Odata
        $.getJSON(query, function (result) {   //Just call getJSON to parse XML stream
            $.each(result.d, function (i, item) {
                $('#photolist').append(new Option(item.FileName, item.PhotoId));
            });
        });

        $('#photolist').change(function () {
            var src = "PhotoData.svc/PhotoInfos(" + $('#photolist').val() + ")/$value";
            $('#photo').attr("src", src);
        });

        $("#like").click(function () {
            var queryLike = "PhotoData.svc/Like?id=" + $('#photolist').val();
            $.ajax(queryLike, function (result) {
                
            });
        });
    });
</script>
</body>
</html>
